<!DOCTYPE html>
<html lang="zh-CN">
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <title>文艺比赛小行家</title> 
  <!-- Bootstrap --> 
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
  <script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js"></script> 
  <style>
		html{
			width:100%;
			height: 100%;
		}
		body{
			width:100%;
			height:100%;
		}
		.section-screen{
			width: 100%;
			height: 100%;
			background:url('bg.jpg') no-repeat;
			background-size: cover;
		}
		.main-title{
			text-align: center;
			margin: 160px auto;
			font-weight: bold;
			color: #cc0000;
		}
		.side-title{
			text-align:center;
		}
	</style> 
 </head> 
 <body> 
  <div class="section-screen container-fluid title"> 
   <h1 class="main-title contest-title"></h1> 
   <h3 class="side-title contest-host"></h3> 
  </div> 
  <div class="section-screen container-fluid rank"> 
   <div class="main-title"> 
    <ol class="rank-list"> 
    </ol> 
   </div> 
  </div> 
  <div class="section-screen container-fluid sign"> 
   <div class="side-title"> 
    <img src="qr.jpg" /> 
   </div> 
  </div> 
  <script>
	
		 var uid = null;
		 var contest = {
		 };
		 var players = [];
		 var currentJob = 'title';
		
		 var app = tcb.init({
		   env: "rouroujiang-2e5v1"
		 })
			var auth = app.auth();

			async function login(){
			  await auth.signInAnonymously();
			  // 匿名登录成功检测登录状态isAnonymous字段为true
			  const loginState = await auth.getLoginState();
			  console.log(loginState.isAnonymous); // true
			}

			login();
		var sid = 1;
		(function(){
			if(location.search){
				if(location.search.indexOf('sid=') > 0 ){
					var idx = location.search.indexOf('sid=');
					var s = '';
					for(var i = idx + 4; i < location.search.length; i++){
						if(location.search[i] === '&'){
							break;
						} else {
							s += location.search[i];
						}
					}
					if(s){
						sid = parseInt(s);
					}
				}
			}
		}());
		console.log(sid);
				
		var refreshScreen = function(){
			$('.section-screen').hide();
			$('.' + currentJob).show();
		};
		var fetchPlayers = function(){
		 app.callFunction({
		   name:'screen',
		   data: {
			   action: 'players',
			   contestId: contest._id
		   }
		 }).then(function(res){
			console.log('players', res);
			if(res.result.data && res.result.data.length){
				players = res.result.data;
				//更新排名页面
				var listr = '';
				for(var i = 0; i < players.length; i++){
					listr += '<li><span class="player-name">' + players[i].name + '</span>&nbsp;' + players[i].score + '分</li>';
				}
				$('.rank-list').html(listr);
			}
		 });
		};
		
		var fetchContest = function(){
		 app.callFunction({
		   name:'screen',
		   data: {
			   action: 'contests',
			   sid: 1
		   }
		 }).then(function(res){
			console.log('contests', res);
			if(res.result.data && res.result.data.length){
				contest = res.result.data[0];
				if(contest.screenjob){
					currentJob = contest.screenjob;
				}
				if(name && currentJob !== name){
					currentJob = name;
				}
				if(contest.title){
					$('title').text(contest.title + ' - 文艺演出小行家');
				}
				//update
				$('.contest-title').text(contest.name);
				$('.contest-host').text(contest.host);
				refreshScreen();
				fetchPlayers();
			}
		 });
		};
		

		setInterval(function(){
			fetchContest();
		}, 2000);


	</script>   
 </body>
</html>